<template>
    <section class="section">
        <div class="container">
            <div class="text-center">
                <h2 class="section-title">关于温馨养老院</h2>
                <div class="section-underline"></div>
            </div>
            <div class="about-wrap">
                <div class="about-image">
                    <img src="@/assets/images/0e071f9118b598a63c3a3ac8c55f524a.png" alt="养老院外观" />
                </div>
                <div class="about-text">
                    <h3 class="about-subtitle">我们的使命与愿景</h3>
                    <p class="text-muted">
                        温馨养老院成立于2005年，是一家集养老、医疗、康复、文娱为一体的综合性养老服务机构。我们致力于为老年人提供专业、温馨、舒适的生活环境，让每一位入住的老人都能感受到家的温暖。
                    </p>
                    <p class="text-muted">
                        我们拥有专业的护理团队、医疗人员和心理咨询师，为老人的身心健康提供全方位的保障。同时，我们还注重老人的精神文化生活，定期举办各类文娱活动，让老人的晚年生活同样丰富多彩。
                    </p>
                    <ul class="about-features">
                        <li>专业护理团队</li>
                        <li>医疗健康保障</li>
                        <li>营养膳食服务</li>
                        <li>丰富文娱活动</li>
                    </ul>
                    <button class="btn-primary mt-24">了解更多 →</button>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup></script>

<style scoped>
.text-center { text-align: center; }
.about-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin-top: 24px; }
.about-image img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.about-subtitle { font-size: 22px; font-weight: 700; color: #445; margin: 8px 0 12px; }
.about-features { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; color: var(--text-color); }
.about-features li::before { content: "✔"; color: var(--primary-color); margin-right: 8px; }
@media (max-width: 900px) { .about-wrap { grid-template-columns: 1fr; } }
</style>